<template>
  <div>
    <AxiomTitle v-if="title" :title="title" class="mb-4 text-center" />
    <el-upload
      ref="uploadRef"
      v-bind="$attrs"
      drag
      action="#"
      :http-request="httpRequest"
      :before-upload="beforeUpload"
      multiple
      class="document-uploader"
    >
      <slot>
        <AxiomIcon name="upload-cloud" size="48px" />
        <div class="el-upload__text" v-html="text" />
      </slot>
      <template #tip>
        <slot name="tip">
          <AxiomText type="secondary" align="center" class="mt-2">{{ tip }}</AxiomText>
        </slot>
      </template>
    </el-upload>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElUpload } from 'element-plus';
import { Upload } from '@element-plus/icons-vue';
import AxiomIcon from './AxiomIcon.vue';
import AxiomTitle from './AxiomTitle.vue';
import AxiomText from './AxiomText.vue';
import AxiomGroup from './AxiomGroup.vue';

defineOptions({
  name: 'AxiomDocumentUploader'
});

const props = defineProps({
  title: { type: String, default: '' },
  httpRequest: { type: Function, required: true },
  beforeUpload: { type: Function, default: () => true },
  text: { type: String, default: '拖拽文件或文件夹至此，或者 <em>选择文件</em>' },
  tip: { type: String, required: true }
});

const uploadRef = ref(null);

defineExpose({
  uploadRef
});
</script>

<style lang="scss" scoped>
:deep(.el-upload-dragger) {
  padding: 40px 20px !important;
  background-color: var(--axiom-fill-color-light);
  border-color: var(--axiom-border-color);
  transition: border-color 0.2s;

  &:hover {
    border-color: var(--axiom-color-primary) !important;
  }
}
</style> 